<template>
  <el-dialog v-model="dialogVisible" title="报修详情" width="50%" @close="handleClose">
    <el-descriptions :column="2" border>
      <el-descriptions-item label="报修人姓名">{{ detail.requester }}</el-descriptions-item>
      <el-descriptions-item label="报修人电话">{{ detail.phone }}</el-descriptions-item>
      <el-descriptions-item label="地址">{{ detail.address }}</el-descriptions-item>
      <el-descriptions-item label="报修内容">{{ detail.remark }}</el-descriptions-item>
    </el-descriptions>

    <el-timeline style="margin-top: 20px;">
      <!-- 维修完成 -->
      <el-timeline-item v-if="detail.status === '2'" :timestamp="detail.updateTime" placement="top">
        <div style="font-size: 14px; color: #666;">维修完成</div>
      </el-timeline-item>
      <!-- XXX指派XXX维修 -->
      <el-timeline-item v-if="detail.worker" :timestamp="detail.updateTime" placement="top">
        <div style="font-size: 14px; color: #666;">{{ detail.requester }}指派{{ detail.worker }}维修</div>
      </el-timeline-item>
      <!-- XXX申请报修 -->
      <el-timeline-item :timestamp="detail.createTime" placement="top">
        <div style="font-size: 14px; color: #666;">{{ detail.requester }}申请报修</div>
      </el-timeline-item>
    </el-timeline>
  </el-dialog>
</template>

<script setup lang="ts" name="DetailDialog">
import { ref, reactive } from 'vue';
import { getObj } from '/@/api/repair/propertyRepair';
import { ElMessage } from 'element-plus';

interface Detail {
  repairId: string;
  requester: string;
  phone: string;
  address: string;
  remark: string;
  status: string;
  worker: string;
  createTime: string;
  updateTime: string;
  logs: { timestamp: string; content: string }[];
}

const detail = reactive<Detail>({
  repairId: '',
  requester: '',
  phone: '',
  address: '',
  remark: '',
  status: '',
  worker: '',
  createTime: '',
  updateTime: '',
  logs: []
});

const dialogVisible = ref(false);

const openDialog = async (repairId: string) => {
  dialogVisible.value = true;
  if (repairId) {
    const res = await getObj(repairId);
    Object.assign(detail, res.data);
  } else {
    ElMessage.error('未找到报修ID');
    dialogVisible.value = false;
  }
};

const handleClose = () => {
  // 清空数据
  Object.assign(detail, {
    repairId: '',
    requester: '',
    phone: '',
    address: '',
    remark: '',
    status: '',
    worker: '',
    createdTime: '',
    updatedTime: '',
    logs: []
  });
};

defineExpose({ openDialog });
</script>
<style scoped>.detail-container {
  padding: 20px;
}

.el-descriptions {
  margin-bottom: 20px;
}

.el-timeline {
  padding-left: 20px;
}

.el-timeline-item__timestamp {
  font-size: 14px;
  color: #999;
  margin-bottom: 5px;
}

.el-timeline-item__content {
  font-size: 14px;
  color: #666;
}
</style>
